<template>
  <!-- you cant write more than one tag
fortunately,you can use the nested writing to write severial tags contained in <div>-->
  <div>
    <!-- newer  content: -->
    <div>
      <!-- <h1>hello world esp2</h1> -->
      <h2>{{ childData }}</h2>
      <!-- customize the property for Child component -->
      <Child @myEvent="changeData" :msg="dataToChild"> </Child>
      <Brother></Brother>
    </div>
    <!-- older content -->
    <div>
      <h1 :title="message">{{ message + " h1" }}</h1>
      <h2>{{ message }}</h2>
      <button @click="showHi">showHi</button>
      <!-- if false,do not load to dom -->
      <h3 v-if="true">test v-if</h3>
      <!-- v-show load to dom but now show  -->
      <h3 v-show="isLogin">test v-show</h3>

      <!-- we prepare two element ,they are weather shown in the browser are depended on the Data `isLogin`  -->
      <p v-if="isLogin">welcom:Mr x</p>
      <!-- if user have already logged in,than don't show the login entry -->
      <!-- in this case ,the v-if is more fit.the two element will be placed in the same place  -->
      <p v-if="!isLogin">
        <a href="">login please</a>
      </p>

      <ul>
        <li v-for="(fruit, index) of fruits" :key="index">
          <p>fruitName:{{ furit }}</p>
          <p>fruitNo:{{ index }}</p>
        </li>
      </ul>

      <table>
        <thead>
          <!-- table head define -->
          <th>order</th>
          <th>name</th>
          <th>age</th>
        </thead>
        <tbody>
          <tr v-for="(v, i) of students" :key="i">
            <td>{{ i + 1 }}</td>
            <td>{{ v.name }}</td>
            <td>{{ v.age }}</td>
          </tr>
        </tbody>
      </table>
      <!-- use customized commponent -->
      <Hello> I am a hello compnent!</Hello>
      <MenuList></MenuList>
    </div>
  </div>
</template>

<script>
// to use the component ,you'd import he conponent and register it

/* newer parts: */
import Child from "./components/Child.vue";
// import

/* older parts */
import Hello from "./components/Header.vue";
import MenuList from "./components/MenuList.vue";
export default {
  // registor commponent:

  components: {
    /* newer content: */
    Child,

    /* older content parts: */
    Hello: Hello,
    // it can be simply short writing:
    MenuList,
  },
  data() {
    return {
      /* newer content: */
      childData: "",
      dataToChild: "app.vue data (from parents)",

      /* older content parts: */
      message: "hello vue",
      isLogin: false,
      fruits: ["banana", "apple", "pear"],
      students: [
        { name: "a", age: 1 },
        { name: "b", age: 2 },
        { name: "c", age: 3 },
      ],
    };
  },
  methods: {
    /* new parts */
    changeData(childData) {
      console.log(childData);
      this.childData = childData;
    },
    /* older parts */
    showHi() {
      alert("hi");
    },
  },
};
</script>

<style>
</style>